<template>
  <div class="nav-container">
    <ul class="nav">
      <router-link to="/fqph" tag="li">
        <span claa="img">
          <img src="../../images/app300.png" alt>
        </span>
        <p>疯抢排行</p>
      </router-link>
      <router-link to="/by" tag="li">
        <span claa="img">
          <img src="../../images/app301.png" alt>
        </span>
        <p>9块9包邮</p>
      </router-link>
      <router-link to="/dingdong" tag="li">
        <span claa="img">
          <img src="../../images/app302.png" alt>
        </span>
        <p>咚咚抢</p>
      </router-link>
      <router-link to="/banj" tag="li">
        <span claa="img">
          <img src="../../images/app303.png" alt>
        </span>
        <p>每日半价</p>
      </router-link>
      <router-link to="/zsz" tag="li">
        <span claa="img">
          <img src="../../images/app304.png" alt>
        </span>
        <p>折上折</p>
      </router-link>
      <router-link to="/bjjx" tag="li">
        <span class="img">
          <img src="../../images/app305.png" alt>
        </span>
        <p>编辑精选</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.nav-container {
  overflow: hidden;
  .nav {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
    li {
      padding-top: 10px;
      float: left;
      width: 33.33%;
      height: 100px;
      span {
        display: block;
        height: 60px;
        width: 60px;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
      p {
        margin-top: 5px;
        text-align: center;
        font-size: 16px;
      }
    }
  }
}
</style>
